import { FC, useEffect, useRef } from "react"
import {
  AxesHelper, PerspectiveCamera,
  PointLight, Scene, WebGLRenderer, AmbientLight, Vector3, Box3, Vector2
} from "three"
import {
  TubeModel
} from "R/models";
import {
  CSS2DObject,
  CSS2DRenderer,
  EffectComposer, OrbitControls,
  OutlinePass, RenderPass,
} from "three/examples/jsm/Addons.js";
import { GUI } from "dat.gui";
// 椭圆点位置
const lightPosition = new Vector3(60, 80, 100)

const Page: FC = () => {
  const container = useRef<HTMLCanvasElement>(null),
    css2renderRef = useRef<HTMLDivElement>(null)
  function tagEventHandle(e: MouseEvent) {
    console.log(e);

  }
  // 基本对象
  useEffect(() => {
    const bodyele = document.body;
    const renderer = new WebGLRenderer({ canvas: container.current! }),
      css2render = new CSS2DRenderer({ element: css2renderRef.current! }),
      camera = new PerspectiveCamera(90, bodyele.clientWidth / bodyele.clientHeight, 1, 1000),
      scene = new Scene(),
      pointLight = new PointLight(0xffffff, 10),
      axesHelper = new AxesHelper(100),
      // 后处理效果合成器
      composer = new EffectComposer(renderer)


    const css2Div = document.createElement('div'),
      css2Obj = new CSS2DObject(css2Div)
    css2Div.classList.add('bg-slate-500', 'text-white', 'bg-opacity-40', 'rounded-md', 'px-2', 'pointer-events-auto')
    const box = new Box3()
    box.expandByObject(TubeModel)
    const TubeModelCenter = new Vector3()
    box.getCenter(TubeModelCenter)

    css2Obj.position.copy(box.getCenter(TubeModelCenter))
    css2Div.addEventListener('click', tagEventHandle)
    css2Div.textContent = "css2标签"
    TubeModel.add(css2Obj)
    renderer.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
    css2render.setSize(bodyele.clientWidth * devicePixelRatio, bodyele.clientHeight * devicePixelRatio)
    // 后处理通道
    const renderPass = new RenderPass(scene, camera)
    composer.addPass(renderPass)

    // 后处理包装
    const outline = new OutlinePass(
      new Vector2(bodyele.clientWidth, bodyele.clientHeight),
      scene, camera);

    outline.selectedObjects = [TubeModel];
    outline.visibleEdgeColor.set(0xffff00);
    composer.addPass(outline)
    renderer.setClearAlpha(.4)

    const gui = new GUI()
    pointLight.position.copy(lightPosition)
    pointLight.decay = 0
    scene.add(
      new AmbientLight(0xffffff, 1),
      axesHelper,
      pointLight,
      TubeModel
    )



    camera.position.set(15, 14, 13)
    camera.lookAt(TubeModel.position)
    new OrbitControls(camera, renderer.domElement)



    function roun(t?: number) {
      // renderer.render(scene, camera)
      css2render.render(scene, camera)
      composer.render()
      requestAnimationFrame(roun)
    }
    roun()
    return () => {
      gui.destroy()
      // renderer.dispose()
    }
  }, [])
  return <div>
    <canvas ref={container}></canvas>
    <div className=" absolute z-10 right-0 bottom-0 top-0 left-0  pointer-events-none" ref={css2renderRef}></div>
  </div>
}
export default Page